<template>
  <div style="background: red;padding: 8px">
    <el-dialog v-model="isShow" :close-on-press-escape="false"
               :close-on-click-modal="false" class="assetDialog"
               @close="onClose" :width="'50%'">
      <template #header>
        <div style="color: black">{{ title }}</div>
      </template>
      <el-tabs v-model="activeName" tab-position="top" @tab-click="handleClick">
        <el-tab-pane class="tabPane" label="角色" name="role">
          <tree-transfer
              ref="treeTransferRef"
              node-key="id"
              :fromData="roleData"
              :toData="toData"
              :fromTitle="'平台角色'"
              :to-name="'角色名称'"
              :to-title="'包含角色'"
              :to-search="false"
              :from-search="false"
              :on-to-left="onRemoveAsset"
              :on-to-right="onAddAsset"/>
        </el-tab-pane>
        <el-tab-pane class="tabPane" label="权限" name="permit">
          <tree-transfer
              ref="treeTransferRef"
              node-key="id"
              :fromData="permitData"
              :toData="toData"
              :fromTitle="'平台权限'"
              :to-name="'权限名称'"
              :to-title="'包含权限'"
              :to-search="false"
              :from-search="false"
              :on-to-left="onRemoveAsset"
              :on-to-right="onAddAsset"/>
        </el-tab-pane>
        <el-tab-pane class="tabPane" label="菜单" name="menu">
          <tree-transfer
              ref="treeTransferRef"
              node-key="id"
              :fromData="menuData"
              :toData="toData"
              :fromTitle="'平台菜单'"
              :to-name="'菜单名称'"
              :to-title="'包含菜单'"
              :to-search="false"
              :from-search="false"
              :on-to-left="onRemoveAsset"
              :on-to-right="onAddAsset"/>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {effect, ref, toRaw} from "vue";
import {useStore} from "@/stores";
import type {TabsPaneContext} from "element-plus";
import TreeTransfer from "@/components/common/TreeTransfer.vue";
import {ElMessage} from "element-plus";

interface AssetConfig {
  submit: any;
}

const store = useStore();
const title = ref();
const activeName = ref('role');

const treeTransferRef = ref(null); // 树形穿梭框
const props = defineProps<AssetConfig>();

const roleData = ref();
const menuData = ref();
const permitData = ref();

effect(() => {
  roleData.value = store.getCurrentPlatform().roleData;
  menuData.value = store.getCurrentPlatform().menuData;
  permitData.value = store.getCurrentPlatform().permitData;
})

let toData = ref([]);

const isShow = ref(false);

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const onAddAsset = async (asset: any) => {
  console.log('--- 增加资源成功：', toRaw(asset));

  ElMessage({
    message: '增加资源成功',
    type: 'success',
  })

  return true;
}

const onRemoveAsset = async (asset: any) => {
  console.log('--- 移除资源成功：', toRaw(asset));

  ElMessage({
    message: '移除资源成功',
    type: 'success',
  })
  return true;
}

const onClose = () => {
  isShow.value = false;
}

const close = () => {
  isShow.value = false;
}

const editAssets = (t: string, item: Record<string, any>) => {
  title.value = t;
  isShow.value = true;
  // treeTransferRef?.value.initTransfer(toData);
}

defineExpose({
  editAssets,
  close,
})

</script>

<style scoped>
.tabPane {
  height: 460px;
}

.dialog-footer {
  margin-right: 4px;
}

.dialog-footer {
  margin-top: 6px;
}

.dialog-footer button:first-child {
  margin-right: 16px;
}

:deep(.el-dialog__body) {
  margin: 0;
  padding: 12px 24px 16px;
}

:deep(.el-dialog__header) {
  width: 100%;
  height: 48px;
}

:deep(.el-dialog__footer) {
  border-top: 1px solid #e3e8ee;
  padding-bottom: 2px;
}

</style>